import React from "react";
class NavBar extends React.Component{
    render(){
        return(
            <div>
                {this.props.children}
            </div>
        )
    }
}

class SiderBar extends React.Component{
    render(){
        return(
            <ul style={{background:'yellow',width:'300px'}}>
                <li>哈哈哈哈哈</li>
                <li>哈哈哈哈哈</li>
                <li>哈哈哈哈哈</li>
                <li>哈哈哈哈哈</li>
                <li>哈哈哈哈哈</li>
                <li>哈哈哈哈哈</li>
                <li>哈哈哈哈哈</li>
            </ul>
        )
    }
}

export default class App extends React.Component{
    state={
        isShow:true
    }
    render(){
        return (
            <div>
                <NavBar>
                    <button onClick={()=>{
                        this.setState({isShow:!this.state.isShow})
                    }}>{this.state.isShow?'合上':'展开'}</button>
                </NavBar>
                {this.state.isShow && <SiderBar/>}
            </div>
        )
    }
}